<template>
  <el-card style="width:1000px; margin:0 auto;">
    <div slot="header">修改密码</div>
    <el-form size="mini" ref="form" :model="formData" :rules="rules" label-width="120px" status-icon>
      <el-form-item label="原密码" prop="oldPassword">
        <el-input type="password" placeholder="请输入原密码" v-model.trim="formData.oldPassword" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="新密码" prop="newPassword">
        <el-input type="password" placeholder="请输入新密码" v-model.trim="formData.newPassword" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="新密码确认" prop="checkPassword">
        <el-input type="password" placeholder="请再次输入新密码" v-model.trim="formData.checkPassword" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSubmit()" v-waves>确定</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<style scoped>
.el-form {
  margin: 20px;
}
</style>

<script>
import waves from '@/directive/waves' // 水波纹指令
import adminUserApi from '@/api/admin/adminUser'
import { checkMiddlePassword } from '@/utils/utils'

export default {
  directives: {
    waves
  },
  data () {
    return {
      formData: {
        newPassword: '',
        checkPassword: '',
        oldPassword: ''
      },
      rules: {
        oldPassword: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value === '' || typeof value === 'undefined') {
                callback(new Error('请输入原密码'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ],
        newPassword: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value === '' || typeof value === 'undefined') {
                callback(new Error('请输入新密码'))
              } else if (value.length < 8 || value.length > 20) {
                callback(new Error('密码长度需在8到20之间'))
              } else if (!checkMiddlePassword(value)) {
                callback(new Error('密码需包含数字、字母、特殊符号中的至少两种'))
              } else if (value === this.formData.oldPassword) {
                callback(new Error('新密码不可与旧密码一致'))
              } else {
                if (this.formData.checkPassword !== '') {
                  this.$refs.form.validateField('checkPassword')
                }
                callback()
              }
            },
            trigger: 'blur'
          }
        ],
        checkPassword: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value === '' || typeof value === 'undefined') {
                callback(new Error('请再次输入密码'))
              } else if (value.length < 8 || value.length > 20) {
                callback(new Error('密码长度需在8到20之间'))
              } else if (!checkMiddlePassword(value)) {
                callback(new Error('密码需包含数字、字母、特殊符号中的至少两种'))
              } else if (value !== this.formData.newPassword) {
                callback(new Error('两次输入密码不一致'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    /**
     * 提交数据
     */
    handleSubmit () {
      this.$refs.form.validate().then(response => {
        adminUserApi.changePassword(this.formData.oldPassword, this.formData.newPassword).then(response => {
          this.formData.newPassword = undefined
          this.formData.oldPassword = undefined
          this.formData.checkPassword = undefined
          this.$refs.form.resetFields()
          this.$notify({
            title: '成功',
            message: '密码修改成功',
            type: 'success'
          })
          adminUserApi.logout().then(() => {
            this.exit()
          }).catch(() => {
            this.exit()
          })
        })
      })
    },
    /**
     * 退出系统
     */
    exit () {
      this.$store.dispatch('LogOut').then(() => {
        location.reload() // 为了重新实例化vue-router对象 避免bug
      })
    }
  }
}
</script>
